<template>
<div class="tw-libmobilesidenavs"
  :class="[`x${_uid}`]">
  <div class="tw-libmobilesidenav-left">
    <van-sidebar v-model="active" @change="handleClick">
      <van-sidebar-item
      v-for="(nav, idx) in navList"
      :key="idx"
      :url="nav.href ? nav.href : ''"
      :title="nav.label">
        <!-- <template v-if="nav.href || nav.anchor" #title>
          <a v-if="nav.href" class="tw-libmobile-sidenav-link" :href="nav.href">
            <template v-if="type!=='none'">
              <i v-if="nav.iconCss && nav.iconCss !==''" class="tw-ico" :class="nav.iconCss"></i>
              <img v-else-if="nav.imgUrl && nav.imgUrl !==''" class="xicon" :src="nav.imgUrl" />
            </template>
            <br v-if="type==='top'"/>
            <span>{{nav.label}}</span>
          </a>
          <a v-else v-lift class="tw-libmobile-tab-link" :name="_uid" :data-target="`#${nav.anchor}`" :data-top="anchorTop"></a>
        </template> -->
        <template #title>
          <template v-if="type!=='none'">
            <i v-if="nav.iconCss && nav.iconCss !==''" class="tw-ico" :class="nav.iconCss"></i>
            <img v-else-if="nav.imgUrl && nav.imgUrl !==''" class="xicon" :src="nav.imgUrl" />
          </template>
          <br v-if="type==='top'"/>
          <span>{{nav.label}}</span>
        </template>
      </van-sidebar-item>
    </van-sidebar>
  </div>
  <div ref="inner" class="tw-libmobilesidenav-right" v-if="rightDiv">
    <slot></slot>
  </div>
</div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'
import padding from '../tw-lib-base/padding/mixins'

export default {
  name: 'side-nav-mobile',

  mixins: [style, border, padding],

  props,

  data() {
    return {
      active: 0,
      val: null,
      anchorTop: 0
    }
  },

  computed: {
    navList () {
      const roleIdList = this.$twApp.user.roleIdList || []
      const result = JSON.parse(JSON.stringify(this.navs))
      const list = []

      result.forEach(item => {
        if (!item.roles || roleIdList.filter((role) => item.roles.includes(role)).length > 0) {
          list.push(item)
        }
      })

      return list
    },

    style () {
      return Object.assign({
        width: this.width,
        background: this.background,
        navColor: this.navColor,
        navFontSize: this.navFontSize,
        activeColor: this.activeColor,
        activeBg: this.activeBg,
        lineHeight: this.lineHeight,
        textAlign: this.textAlign,
        padding: this.padding,
        navBgColor: this.navBgColor,
        iconWidth: this.iconWidth,

        // backgroundColor: this.outsideBg,
        // backroundImage: this.outsideBgImage[0],
        backgroundPosition: this.bgAlign,
        backgroundSize: this.backgroundSize,
        // outsideGradientColor1: this.outsideGradientColor1,
        // outsideGradientColor2: this.outsideGradientColor2,
        // outsideGradientDeg: this.outsideGradientDeg,
        bgAlign: this.bgAlign,
        rightwidth: this.rightwidth,
        insideBg: this.insideBg,
        insideBgImage: this.insideBgImage,
        insideGradientColor1: this.insideGradientColor1,
        insideGradientColor2: this.insideGradientColor2,
        insideGradientDeg: this.insideGradientDeg,
        insideBackgroundSize: this.insideBackgroundSize,
        insideBgAlign: this.insideBgAlign,
        paddingTop: this.paddingTop,
        paddingBottom: this.paddingBottom,
        paddingLeft: this.paddingLeft,
        paddingRight: this.paddingRight,
        insideBgColor: this.insideBgColor,
        medialPoint: this.medialPoint,
        medialPointWidth: this.medialPointWidth,
        boxShadow: this.boxShadow,
        borderRadius: this.radius,
        shadowColor: this.shadowColor
      }, this.paddingStyle, this.borderStyle)
    }
  },

  methods: {
    handleClick (index) {
      this.change(this.navs[index].value || '')
      localStorage.setItem('navItem', index)
    },
    setValue () {
      const pathname = window.location.pathname
      let value = ''

      for (const nav of this.navs) {
        if (nav.href) {
          if (nav.activeText) {
            if (pathname.includes(nav.activeText)) {
              value = nav.value
              this.value = value
            }
          } else if (pathname.includes(nav.href.replace(/^\./, ''))) {
            value = nav.value
            this.value = value
          }
        }
      }

      if (value === '' && this.navs[this.active]) {
        if (localStorage.getItem('navItem')) {
          value = this.navs[this.active].value || ''
        } else {
          value = this.navs[this.active].value || ''
        }
        this.value = value
      }

      this.change(value)
    },
    setStyle () {
      let style = `
        ::root.tw-libmobilesidenavs .van-sidebar {
          width: ${this.width};
        }
        ::root.tw-libmobilesidenavs .van-sidebar-item {
          color:  ${this.navColor};
          font-size: ${this.navFontSize};
          line-height: ${this.lineHeight};
          text-align: ${this.textAlign};
          padding: ${this.padding};
          background-color: ${this.navBgColor};
        }

        ::root.tw-libmobilesidenavs .van-sidebar-item--select,
        ::root.tw-libmobilesidenavs .van-sidebar-item--select:active {
          background-color: ${this.activeBg};
          color:  ${this.activeColor};
          font-weight: 500;
        }

        ::root.tw-libmobilesidenavs .van-sidebar-item--select::before {
          width: 0
        }

        ::root .tw-libmobilesidenav-left {
          background-color: ${this.background};
        }

        ::root.tw-libmobilesidenavs .xicon {
          width: ${this.iconWidth};
        }

      `
      if (this.rightDiv) {

        style += `
          ::root.tw-libmobilesidenavs {
            width: 100%;
          }
        `

        // ::root 表示组件根元素选择器
        let insideBgImage = 'none'

        if (this.insideGradientColor1) {
          insideBgImage = `linear-gradient(${this.insideGradientDeg}deg, ${this.insideGradientColor1}, ${this.insideGradientColor2 || this.insideGradientColor1})`
        }

        if (this.insideBgImage[0]) {
          if (insideBgImage === 'none') {
            insideBgImage = `url("${this.$twApp.fileBaseUrl}${this.insideBgImage[0].localPath}")`
          } else {
            insideBgImage += `, url("${this.$twApp.fileBaseUrl}${this.insideBgImage[0].localPath}")`
          }
        }

        style += `
          ::root > .tw-libmobilesidenav-right {
            width: ${this.rightwidth};
            padding: ${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft};
            background-color: ${this.insideBgColor};
            background-image: ${insideBgImage};
            background-position: ${this.insideBgAlign} center;
            background-size: ${this.insideBackgroundSize};
            background-origin: ${this.insideBgPosition};
            box-shadow: ${this.shadowColor ? `0 2px 9px ${this.shadowColor}` : 'none'};
            border-radius: ${this.radius};
          }
        `

        if (this.medialPoint && this.medialPointWidth) {
          style += `
            @media (max-width: ${this.medialPoint}) {
              ::root > .tw-libmobilesidenav-right {
                width: ${this.medialPointWidth};
              }
            }
          `
        }

        if (this.hasBorder) {
          const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

          if (this.borderPosition.includes(0)) {
            style += `
                ::root > .tw-libmobilesidenav-right {
                  border-top: ${border};
                }
              `
          }

          if (this.borderPosition.includes(1)) {
            style += `
                ::root > .tw-libmobilesidenav-right {
                  border-bottom: ${border};
                }
              `
          }

          if (this.borderPosition.includes(2)) {
            style += `
              ::root > .tw-libmobilesidenav-right {
                  border-left: ${border};
                }
              `
          }

          if (this.borderPosition.includes(3)) {
            style += `
              ::root > .tw-libmobilesidenav-right {
                border-right: ${border};
              }
            `
          }
        }
      }

      this.addStyle(style)
    },
    change(value) {
      const val = value || (this.navs[this.active] ? this.navs[this.active].value : '') || ''
      this.$emit('input', val)
      this.$emit('change', val)
    },
    setActiveNav () {
      if (this.val !== this.value) {
        for (let i = 0; i < this.navs.length; i++) {
          if (this.navs[i] && this.navs[i].value === this.value) {
            this.val = this.value
            this.active = i
            break
          }
        }
      }
    }
  },
  created () {
    if (localStorage.getItem('navItem')) {
      this.active = parseInt(localStorage.getItem('navItem'))
    } else {
      this.active = parseInt(this.defaultIndex)
    }
    this.setValue()
  },

  watch: {
    value () {
      this.setActiveNav()
    },
    navs: {
      deep: true,
      handler (val, old) {
        this.setValue()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
